<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>增加权限</title>
    <!-- title -->
    <% include ../public/page_title.html%>
    <link rel="stylesheet" href="/public/admin/lib/zTree/css/zTreeStyle/zTreeStyle.css">
</head>
<body class="main_body">
    <fieldset class="layui-elem-field" style="margin:10px;">
        <legend>增加权限</legend>
        <div class="layui-field-box">
            <div class="layui-row">
                <div class="layui-col-md9">
                    <form class="layui-form" style='padding:15px 0;'>
                        <div class="layui-form-item">
                            <label class="layui-form-label">模块名称</label>
                            <div class="layui-input-block">
                                <input type="text"  name="module_name" class="layui-input" lay-verify="module_name" placeholder="请输入模块名称">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">节点类型</label>
                                <div class="layui-input-inline">
                                    <select id="type" name="type" class="newsLook" lay-filter="type">
                                        <option value="1">模块</option>
                                        <option value="2">菜单</option>
                                        <option value="3">操作</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">所属模块</label>
                                <div class="layui-input-inline">
                                    <input type="hidden" id="module_id" name='module_id' value="0">
                                    <input type="text" value="顶级模块" id="module" name="module" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                                <label class="layui-form-label">权限图标</label>
                                <div class="layui-input-block">
                                    <input type="text" id='icon' name="icon"  class="layui-input" placeholder="请输入图标class,默认空">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">菜单模块</label>
                                <div class="layui-input-block">
                                    <input type="text" id='model' name="model"  class="layui-input" placeholder="请输入菜单模块,默认空">
                                </div>
                            </div>
                        <div class="layui-form-item" id="actionNameBox">
                            <label class="layui-form-label">操作名称</label>
                            <div class="layui-input-block">
                                <input type="text" id='action_name'  name="action_name"  class="layui-input" placeholder="请输入操作名称">
                            </div>
                        </div>
                        <div class="layui-form-item" id="urlBox">
                            <label class="layui-form-label">操作地址</label>
                            <div class="layui-input-block">
                                <input type="text" id='url'  name="url" class="layui-input"  placeholder="请输入操作地址">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">权限排序</label>
                            <div class="layui-input-block">
                                <input type="text"  id="sort" name="sort" class="layui-input" placeholder="请输入排序">
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">权限描述</label>
                            <div class="layui-input-block">
                                <textarea name='description' placeholder="请输入权限描述" class="layui-textarea"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button id="addAccess" class="layui-btn" lay-submit lay-filter="addAccess">立即提交</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                <a href="<%=adminName%>/access" class="layui-btn layui-btn-primary">返回</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </fieldset>
    <div id="tree" class="ztree" style="display:none;padding:20px;"></div>
	<script type="text/javascript" src="/public/admin/layui/layui.js"></script>
    <script type="text/javascript" src="/public/admin/js/index.js"></script>
    <script src="/public/admin/lib/zTree/js/jquery-1.4.4.min.js"></script>
    <script src="/public/admin/lib/zTree/js/jquery.ztree.all.min.js"></script>
    <script>
        var moduleList = JSON.parse('<%-moduleList%>');
        var accessAdd={
            moduleList:{
                name:'顶级模块',
                pid:'0',
                _id:'0',
                children:moduleList
            },
            //初始化
            init:function(){
                console.log(this.moduleList)
                this.createTree()
                this.openModule()
                this.laodLayui()
            },
            //生成树
            createTree:function(){
                this.zTreeObj = $.fn.zTree.init($("#tree"), {
                    data:{
                        simpleData:{
                            enable: true,
                            idKey:'_id',
                            pIdKey :'pid'
                        }
                    }
                }, this.moduleList);
                this.zTreeObj.expandAll(true);
            },
            //所属模块
            changeAccess:function(layer){
                var _this = this;
                var node = _this.zTreeObj.getNodeByParam("_id", $('#module_id').val());
                _this.zTreeObj.selectNode(node);
                layer.open({
                    type: 1,
                    title: '所属模块',
                    maxmin: true,
                    area: ['300px', '400px'],
                    btn: ['确定', '取消'],
                    content: $('#tree'),
                    yes: function(index, layero){
                        var selectNode=_this.zTreeObj.getSelectedNodes();
                        console.log(selectNode)
                        if(selectNode.length>0){
                            $('#module_id').val(selectNode[0]._id);
                            $('#module').val(selectNode[0].name)
                        }else{
                            $('#module_id').val('0')
                            $('#module').val('顶级模块')
                        }
                        layer.close(index)
                    }
                    ,btn2: function(index, layero){
                        return true
                    }
                });
            },
            //打开所属模块弹窗
            openModule:function(){
                var _this = this;
                $('#module').focus(function(){
                    $('#module').blur()
                    layui.use('layer', function() {
                        var layer = layui.layer;
                        _this.changeAccess(layer);
                    })
                })
            },
            //表单验证
            verify:function(form){
                form.verify({
                    module_name: function(value) {
                        if(value.length == 0) {
                            return '请输入模块名称';
                        }else if(value.length<2){
                            return '模块名称不能小于2个字符';
                        }
                    }
                });
            },
            laodLayui:function(){
                var _this = this
                layui.use(['form', 'layer'], function() {
                    var form = layui.form,
                        layer = layui.layer;

                    //自定义验证规则
                    _this.verify(form);

                    var typeVal = '1';
                    $('#actionNameBox').hide();
                    $('#urlBox').hide();
                    form.on('select(type)', function(data){
                        typeVal = data.value;
                        if(data.value==2||data.value==3){
                            $('#actionNameBox').show();
                            $('#urlBox').show();
                        }else{
                            $('#actionNameBox').hide();
                            $('#urlBox').hide();
                        }
                    });
                    //监听提交
                    form.on('submit(addAccess)', function(data) {
                        data.field._csrf = "<%=csrf%>";
                        // $('#addAccess').attr('disabled',true);
                        if(!data.field.sort){
                            layer.msg('请输入排序');
                            $('#sort').focus();
                            $('#addAccess').removeAttr('disabled');
                            return false;
                        }
                        if(typeVal==2||typeVal==3){
                            if(!data.field.action_name){
                                layer.msg('请输入操作名称');
                                $('#action_name').focus();
                                $('#addAccess').removeAttr('disabled');
                                return false;
                            }
                            if(!data.field.url){
                                layer.msg('请输入操作地址');
                                $('#url').focus();
                                $('#addAccess').removeAttr('disabled');
                                return false;
                            }
                        }
                        console.log(data.field)
                        $.ajax({
                            type:'post',
                            data:data.field,
                            dataType:'json',
                            url:'<%=adminName%>/access/doadd',
                            success:function(res){
                                console.log(res);
                                if(res.code===0){
                                    layer.msg(res.msg);
                                    setTimeout(function(){
                                        window.location.href = "<%=adminName%>/access"
                                    },1000)
                                }else{
                                    layer.msg(res.msg);
                                }   
                            },
                            error:function(err){
                                $('#addAccess').removeAttr('disabled');
                                layer.msg('后台出错');
                            }
                        })
                        return false;
                    })
                })
            }
        }
        accessAdd.init()
    </script>
</body>
</html>